@import "tailwindcss";

/* 
伪类选择器，表示文档的根元素
用于定义全局的 CSS 变量
 */
:root {
  --background: #ffffff;
  --foreground: #171717;
}

/* @theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
} */

/* 
定义在用户操作系统设置为深色模式（dark mode）时的样式变量
 */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 
文字走马灯
 */
.marquee-text {
  display: inline-block;
  /* 初始位置，通过添加左侧 padding 将文字推移到父元素最右侧  */
  padding-left: 100%;
  /* 保留空白符 且 防止文本自动换行 */
  white-space: nowrap;

  animation: slide 20s linear infinite;
}

/* 定义 icon 沿着垂直中线有内向外实现 3D 旋转动画 */
@keyframes rotate3d {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* 图片样式 */
.rotating-image {
  /* width: 100%; */
  /* height: 100%; */
  /* 保持图片比例并填充容器 */
  /* object-fit: cover; */
  /* 保留子元素的 3D 转换效果 */
  transform-style: preserve-3d;
  /* 定义动画 */
  animation: rotate3d 5s infinite linear; 
}
